<div class="sm-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div id="list_form" class="layui-form sm-operation">
            <blockquote class="site-text layui-elem-quote">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input"
                               id="title">
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-inline">
                            <select id="newsType" name="newsType">
                                <option value="">全部</option>
                                <option value="旅游">旅游</option>
                                <option value="教育">教育</option>
                                <option value="时尚">时尚</option>
                                <option value="科技">科技</option>
                                <option value="财经">财经</option>
                                <option value="娱乐">娱乐</option>
                                <option value="母婴">母婴</option>
                                <option value="健康">健康</option>
                                <option value="历史">历史</option>
                                <option value="军事">军事</option>
                                <option value="美食">美食</option>
                                <option value="文化">文化</option>
                                <option value="星座">星座</option>
                                <option value="社会">社会</option>
                                <option value="游戏">游戏</option>
                                <option value="搞笑">搞笑</option>
                                <option value="动漫">动漫</option>
                                <option value="宠物">宠物</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="search">查询</button>
                    </div>

                </div>
            </blockquote>
        </div>
        <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
    </div>
</div>

<script>
    layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        //表单重新渲染
        form.render();
        var tableObj = table.render({
            id: 'list_table',
            elem: '#list_table',
            url: '/wxcms/wxcmsnews/list',
            align: "center",
            limit: "12",
            cols: [[ //表头
                {type: 'checkbox'},
                {type: 'numbers', title: '序号', width: 50},
                {field: 'title', title: '标题', width: 500, align: 'center',},
                {field: 'viewTotal', title: '阅读数', width: 150, align: 'center', sort: true},
                {
                    field: 'newsType', title: '类型', width: 150, align: 'center', templet: function (d) {
                    return '<a href="' + d.newsTypeUrl + '" class="font-primary" lay-event="sync" target="_Blank">' + d.newsType + '</a>';
                }
                },
                {field: 'publishTime', title: '发布时间', width: 170, align: 'center', sort: true},
                {
                    field: 'newsUrl', title: '原文', align: 'center', templet: function (d) {
                    return '<a href="' + d.newsUrl + '" class="font-primary" lay-event="sync" target="_Blank">原文</a>';
                }
                },
            ]],
        });
        table.on('sort(mainList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('list_table', { //testTable是表格容器id
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , page: {
                    curr: 1
                }
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                    , title: $("#title").val()
                    , newsType: $("#newsType").val()
                }
            });
        });
        $("#search").click(function () {
            smartAui.reloadTable(tableObj);
        });
    });
</script>
